import axios from 'axios'
import { Message } from 'element-ui'
import store from '@/store'
import router from '@/router'
// Set config defaults when creating the instance
const instance = axios.create({
  // 基地址前缀
  baseURL: '/api',
  // 请求时间
  timeout: 5000
})

// 请求拦截器
instance.interceptors.request.use((config) => {
  // Conten-Type 这个是 被axios 默认设置为了 appliaction/json
  // Authorization 这个值 axios默认没有， 需要我们手动配置
  if (store.state.user.token) {
    config.headers.Authorization = `Bearer ${store.state.user.token}`
  }
  return config
}, (error) => {
  console.log('请求失败')
  return Promise.reject(error)
})

// 响应拦截器
instance.interceptors.response.use((response) => {
  // 在这里做一个前置判断,判断是否是二进制
  if (response.data instanceof Blob) return response.data
  if (response.data.success) {
    return response.data
  } else {
    // 下面这种代码，是在.vue后缀的文件里面用的，硬因为this必须要是 vue组件实例
    // 而我们这个 .js文件是 不能使用this的，或者说下面this指向的是undefined
    // this.$message('这是一条消息提示')
    Message.error({ message: response.data.message })
    return Promise.reject(response)
  }
}, (error) => {
  // 这里要处理error对象，不要用console.log，应该用console.dir
  // console.dir(error)
  // 以后写比较长的对象的.的语法，都用?. 去代替 直接.， 防止一些 xxx of undefined
  if (error?.response?.status === 401) {
    // 只要进入了这个if分支，那么证明token失效，就需要跳转回去登录页面，并且情况所有的token和userInfo的信息
    // store.dispatch('/user/logoutAction')  // 这里是模块，不能加/。 路由跳转才能加/
    store.dispatch('user/logoutAction')
    router.push('/login')
  }
  return Promise.reject(error)
})

export default instance
